import React, { PureComponent } from 'react'
import classNames from 'classnames'

export default class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      isbbb: true,
      isccc: true,
    }
  }

  render() {
    const { isbbb, isccc } = this.state
    const classList = ['aaa']
    if (isbbb) classList.push('bbb')
    if (isccc) classList.push('ccc')
    const classnames = classList.join(' ')

    return (
      <div>
        <h2 className={`aaa ${isbbb ? 'bbb' : ''} ${isccc ? 'ccc' : ''}`}>
          哈哈哈
        </h2>

        <h2 className={classnames}>abcd</h2>

        <h2 className={classNames('abc', { bbb: isbbb, ccc: isccc })}>
          abcdef
        </h2>

        <h2 className={classNames(['aaa', { bbb: isbbb, ccc: isccc }])}>
          嘻嘻嘻
        </h2>
      </div>
    )
  }
}
